<template>
  <div class="tool-bar">
    <a-popover placement="top">
      <template #content>
        <div>更擅长处理代码问题</div>
      </template>
      <div class="tool-item" @click="selectTool('code')">
        <img src="/icon/code.svg" alt="代码模式" class="tool-icon" />
        <div>代码模式</div>
      </div>
    </a-popover>

    <a-popover placement="top">
      <template #content>
        <div>一键生成Java CRUD代码</div>
      </template>
      <div class="tool-item" @click="selectTool('crud')">
        <img src="/icon/generate.svg" alt="Java代码生成器" class="tool-icon" />
        <div>代码生成器</div>
      </div>
    </a-popover>

    <a-popover placement="top">
      <template #content>
        <div>文本智能翻译</div>
      </template>
      <div class="tool-item" @click="selectTool('translation')">
        <img src="/icon/translation.svg" alt="AI翻译" class="tool-icon" />
        <div>AI翻译</div>
      </div>
    </a-popover>

    <a-popover placement="top">
      <template #content>
        <div>SQL、JSON、XML、YAML 智能格式转换</div>
      </template>
      <div class="tool-item" @click="selectTool('conversion')">
        <img src="/icon/conversion.svg" alt="格式转换器" class="tool-icon" />
        <div>格式转换器</div>
      </div>
    </a-popover>

    <div class="tool-item" @click="selectTool('collection')">
      <img src="/icon/collection-blue.svg" alt="我的收藏" class="tool-icon" />
      <div>我的收藏</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  toolChange: {
    type: Function
  }
})

const toolType = ref('code')

function selectTool(type) {
  toolType.value = type
  props.toolChange(type)
}
</script>

<style scoped>
.tool-bar {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 12px;
}

.tool-item {
  width: 140px;
  height: 36px;
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 1px solid #d2ccff;
  padding: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s ease;
}

.tool-item:hover {
  color: #605bec;
  background: #e1dbff;
}

.tool-icon {
  width: 20px;
  margin-right: 6px;
}
</style>
